<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <style>
        #div1 {
            border: 10px blue solid;
            width: 1000px;
            height: 100px;
        }

        #div2 {
            border: 10px black solid;
            width: 500px;
            height: 50px;
        }
    </style>
</head>

<body>
<div id="div">
    <div id="div1" @mousemove="method1">
        <p id="div2" @mousemove.stop="method2"></p>
    </div>
</div>
</body>
    <script>
        new Vue({
           el: "#div",
            methods:{
               method1(event){
                   console.log("div:" + event.offsetX +"::" + event.offsetY)
               },
                method2(event){
                   console.log("p:" + event.offsetX +"::" + event.offsetY)
                }
            }
        });
    </script>
</html>